<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>君地集团 - 爱吉多 - 证书</title>
    <% include ../../common/common-resource.ejs %>
    <script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
    <script src="/javascripts/manage/king-land/index.js"></script>
</head>
<body>
<div class="container-fluid" id='banner-container'>
    <div class="row">
        <div class="col-md-12">
            <ul class="breadcrumb">
                <li>
                    <a href="#">君地</a>
                </li>
                <li>
                    <a href="#">后台管理</a>
                </li>
                <li class="active">
                    君地-【首页】配置
                </li>
            </ul>
            <ul class="nav nav-tabs">
                <li>
                    <a href="#">证书配置</a>
                </li>
                <li class="active">
                    <a href="#">首页配置</a>
                </li>
                <li>
                    <a href="#">商品配置</a>
                </li>
                <li>
                    <a href="#">水果配置</a>
                </li>
                <li>
                    <a href="#">首页配置</a>
                </li>
            </ul>
            <div class="page-header">
                <h1>
                    配置首页轮播图!
                    <small>增加、修改、删除、禁用轮播图！</small>
                </h1>
                <button class="btn btn-success" @click='onAddClick'>添加轮播图</button>
            </div>
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>轮播图名</th>
                    <th>图片排序</th>
                    <th>更新时间</th>
                    <th>是否可用</th>
                    <th>图片链接</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <% banners.forEach(function (banner) { %>
                <tr :class='{danger: <%=banner.id%> == editingItem.id}'>
                    <td><%= banner.id %></td>
                    <td><%= banner.name%></td>
                    <td><%= banner.sortNumber%></td>
                    <td><%= banner.updateTime %></td>
                    <td><%= banner.status == 1 ? "是" : "否"%></td>
                    <td><%= banner.imageUrl %></td>
                    <td>
                        <button class="btn btn-xs btn-primary" @click='onEditClick("<%= banner.id %>")'>编辑</button>
                        <button class="btn btn-xs btn-danger" @click='onDeleteClick("<%= banner.id %>")'>删除</button>
                    </td>
                </tr>
                <% }) %>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row" v-if='isFormShow'>
        <div class="col-md-12">
            <form role="form" autocomplete='off' @submit.prevent ref='banner-form' method='post' action='/manage/king-land/index/postBanner' enctype="multipart/form-data">
                <input type="hidden" name='id' v-model='editingItem.id'>
                <div class="form-group">
                    <label for="banner-name">
                        轮播图名字
                    </label>
                    <input type="text" class="form-control" id="banner-name" v-model='editingItem.name' name='name'/>
                </div>
                <div class="form-group">
                    <label for="sort-number">
                        轮播排序
                    </label>
                    <input type="text" class="form-control" id="sort-number" v-model='editingItem.sortNumber' name='sortNumber'/>
                </div>
                <div class="form-group">
                    <label for="banner-image">
                        上传证书
                    </label>
                    <input type="file" id="banner-image" name='homeBanner' @change='onFileChange'/>
                    <p class="help-block">
                        图片最好是【220*320】要不然， 在页面上显示会惨不忍睹
                    </p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" v-model='editingItem.status' name='status' :value='editingItem.status'/> 是否可用
                    </label>
                </div>
                <button class="btn btn-success" @click='onSubmitClick' :disabled='isSubmitEnabled'>
                    提交
                </button>
            </form>
        </div>
        <div class="col-md-12" style='margin-top: 50px;'>
            <img alt="Bootstrap Image Preview" :src="editingItem.imageUrl" style='width: 100%;'/>
            <dl>
                <dt>
                    Description lists
                </dt>
                <dd>
                    A description list is perfect for defining terms.
                </dd>
                <dt>
                    Euismod
                </dt>
                <dd>
                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                </dd>
                <dd>
                    Donec id elit non mi porta gravida at eget metus.
                </dd>
                <dt>
                    Malesuada porta
                </dt>
                <dd>
                    Etiam porta sem malesuada magna mollis euismod.
                </dd>
                <dt>
                    Felis euismod semper eget lacinia
                </dt>
                <dd>
                    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
                </dd>
            </dl>
        </div>
    </div>
</div>
</body>
</html>
